<template>
  <div class="table-components">
    <el-table
      ref="myTable"
      :border="border"
      v-loading="loading"
      :data="dataSource"
      row-key="id"
      stripe
      v-bind="tableProps"
      height="100%"
      scrollbar-always-on
      :default-sort="{ prop: 'date', order: 'descending' }"
      header-cell-class-name="heardClassName"
      :tooltip-options="{ popperClass: 'my-custom-tooltip' }"
      :cell-class-name="tableCellClassName"
      @selection-change="handleSelectionChange"
    >
      <RenderColumn v-for="item in columns" :key="item.prop" :item="item" />
    </el-table>
  </div>
</template>

<script setup lang="ts">
import RenderColumn from './renderColumn.vue';
import type { TableProps, TableColumn } from '@/types/table';
const myTable = ref(null);
const { tableProps, columns, dataSource, loading, border, tableCellClassName } =
  defineProps<{
    tableProps?: TableProps;
    loading?: boolean;
    border?: boolean;
    columns: TableColumn[];
    dataSource: any[];
    tableCellClassName?: any;
  }>();
// watch(dataSource, applyFiltersToColumns, { immediate: true });
const emits = defineEmits(['selection-change']);
const handleSelectionChange = (val: any) => {
  emits('selection-change', val);
};
defineExpose({
  myTable,
});
</script>
<style>
.my-custom-tooltip {
  max-width: 600px !important;
  /* 如果是 scoped 样式，可能需要使用 /deep/ 或者 >>> 来穿透作用域 */
}
.table-components .el-table__header-wrapper {
  background-color: #f5f7fa; /* 浅蓝色背景 */
}
.heardClassName {
  background-color: #f5f7fa !important; /* 浅蓝色背景 */
}
</style>
<style scoped lang="scss">
.table-components {
  width: 100%;
  height: 100%;
}
</style>
